import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Main()));
}

class Main extends StatefulWidget {
  const Main({super.key});

  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '案例-商品订单详情',
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: false,
        backgroundColor: Colors.red,
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        color: const Color.fromARGB(255, 242, 231, 235),
        child: Column(
          children: [
            const Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  '2024-08-15 21:49:48',
                  style: TextStyle(color: Colors.black, fontSize: 13),
                ),
                Text(
                  '待发货',
                  style: TextStyle(color: Colors.orange, fontSize: 13),
                ),
              ],
            ),
            const SizedBox(height: 10), // 充当 margin 角色
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.network(
                  width: 100,
                  height: 100,
                  'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                    child: Container(
                  height: 100,
                  color: Colors.transparent,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        '茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                      Container(
                        color: Colors.white,
                        child: const Text(
                          '规格:白色240ml',
                          style: TextStyle(color: Colors.grey),
                        ),
                      ),
                      const Text('¥119.5'),
                    ],
                  ),
                )),
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  child: const Text('x 2'),
                )
              ],
            ),
            const Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Text('合计：￥239.00'),
              ],
            ),
            const SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('再次购买'),
                ),
              ],
            ),
            Column(
              children: [
                OutlinedButton(
                  onPressed: () {},
                  child: const Text('文本框按钮'),
                ),
                TextButton(
                  onPressed: () {},
                  child: const Text('文本按钮'),
                ),
                FilledButton(
                  onPressed: () {},
                  child: const Text('纯色按钮'),
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('渐变色按钮'),
                ),
                FloatingActionButton(
                  onPressed: () {},
                  child: const Icon(Icons.add),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
